import { computed } from 'vue'
import { PC_DEVICE_WIDTH } from '@/constants'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
// 判断当前是否为移动设备，判断依据屏幕宽度是否小于一个指定宽度
export const isMobileTerminal = computed(() => {
  return width.value < PC_DEVICE_WIDTH
})

// 动态指定 rem 基准值 最大值为40px 根据用户的屏幕宽度，进行一些计算 并把计算出来的赋值给html根标签作为fontsize大小

export const useRem = () => {
  // 定义最大的fontSize
  const MAX_FONTSIZE = 40
  // 监听html文档被解析完成的事件
  document.addEventListener('DOMContentLoaded', () => {
    // 拿到html标签
    const html = document.querySelector('html')
    // 计算fontszie 根据屏幕宽度/10
    let fontSize = window.innerWidth / 10
    fontSize = fontSize > MAX_FONTSIZE ? MAX_FONTSIZE : fontSize
    // 赋值给html
    html.style.fontSize = fontSize + 'px'
  })
}
